<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

          class Clock extends React.Component{
              constructor(props) {
                super(props)
                this.state = {date:new Date()};
              }

              componentDidMount() {
                this.timeInter = setInterval(() => this.tick(), 1000)
              }

              componentWillMount(){
                  clearInterval(this.timeInter);
              }

              tick() {
                // this.state = {date:new Date()}; 
                this.setState((prevState, prop)=>({
                      date: new Date()
                }));
              }

              render(){
                  return (
                    <div>
                      <h1>Time</h1>
                      <h2>It is {this.state.date.toString()}</h2>
                    </div>
                  );
              };
              
          }

          function App() {
            return (
              <div>
                <Clock />
                <Clock />
                <Clock />
              </div>
            );
          }

          ReactDOM.render(
            <App />,
            document.getElementById('root')
          );

          // ReactDOM.render(
          //   <Clock />,
          //   document.getElementById('root')
          // );
    </script>
  </body>
</html>